import React, { Component } from 'react';
// 本地图片必须单独导入
import pic1 from '../../assets/1.jpg'
import pic2 from '../../assets/2.jpg'
import pic3 from '../../assets/3.jpg'
import pic4 from '../../assets/4.jpg'
import pic5 from '../../assets/6.jpg'

import '../../styles/Rests/bottom1.css'

class MyBottom1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs:[
                {pic:pic1,text:'店铺'},{pic:pic2,text:'分类'},{pic:pic3,text:'全部商品'},{pic:pic4,text:'购物车'},{pic:pic5,text:'个人中心'},
            ],
            bottomIndex: 0,
        }
    }
    handlerClick(index,e) {
        this.setState({
            bottomIndex:index
        })
    }
    render() {
        return (
            <div className='bottom'>
                <ul>
                    {this.state.tabs.map((item,index)=>{
                        return (
                            <li className={`${this.state.bottomIndex === index?'highlight':''}`} onClick={(e)=>{this.handlerClick(index,e)}} key={index}>
                                <img src={item.pic} alt="" />
                                <span>{item.text}</span>
                            </li>
                        )
                    })}
                </ul>
            </div>
        );
    }
}

export default MyBottom1;